<template>
    <div class="Nav">
        <div class="Nav-downloading">
            <router-link to="/" tag="div" class="Nav-btnArea">
                <span class="Nav-flag"></span>
                <div class="iconfont icon-download" style="font-size: 20px"></div>
                <div class="Nav-btnArea-text" style="padding-left: 8px">正在传输</div>
            </router-link>
        </div>
        <div class="Nav-downloaded">
            <router-link to="/history" tag="div" class="Nav-btnArea">
                <span class="Nav-flag"></span>
                <div class="iconfont icon-yiwancheng" style="font-size: 14px;"></div>
                <div class="Nav-btnArea-text" style="padding-left: 8px">完成</div>
            </router-link>
        </div>
        <div class="Nav-Juge">
            <router-link to="/judge" tag="div" class="Nav-btnArea">
                <span class="Nav-flag"></span>
                <div class="iconfont icon-jiance" style="font-size: 14px;"></div>
                <div class="Nav-btnArea-text" style="padding-left: 8px">检测</div>
            </router-link>
        </div>
        <div class="Nav-setting">
            <router-link to="/setting" tag="div" class="Nav-btnArea">
                <span class="Nav-flag"></span>
                <div class="iconfont icon-iconfonticonfontjixieqimo" style="font-size: 14px;"></div>
                <div class="Nav-btnArea-text" style="padding-left: 8px">设置</div>
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style lang="less" scoped>
    .Nav{
        width: 100%;
        height: 56px;
        display: flex;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        background-color: #403f56;
        flex-direction: row;
        .router-link-exact-active{
            .iconfont,.Nav-btnArea-text{
                color: #eb3f57;
            }
            &:after{
                height: 2px;
                width: 100%;
                position: absolute;
                background-color: #eb3f57;
                left: 0;
                bottom: 0;
                right: 0;
                content:" "
            }
        }
        &-downloading,&-downloaded,&-setting,&-Juge{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;

            .iconfont{
                font-size: 12px;
            }

            &:hover{
                .Nav-flag{
                    visibility: visible!important;
                    background-color:#bed7fe ;
                }
            }
        }
        &-downloading{

        }
        &-downloaded{

        }
        &-setting{

        }
        &-btnArea{
            text-align: center;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            position: relative;

            &:after{
                height: 2px;
                width: 100%;
                position: absolute;
                background-color: #a09fab;
                left: 0;
                bottom: 0;
                right: 0;
                content:" "
            }

            .iconfont{
                font-size: 30px;
                color: #bed7fe;
            }
            &-text{
                font-size: 12px;
                color: #bed7fe;
            }
        }
    }
</style>
